<template>
  <div class="index-view">
    <!-- 新增按钮 -->
    <el-button type="primary" @click="handleClick">新增</el-button>
    <!-- 表单 -->
    <FormView @formView="formView" />
    <!-- 表格 -->
    <TableView :tableData="tableData" />
    <!-- 分页 -->
    <PageView @pageValue="pageValue" @currentvalue="currentvalue" />
    <!-- 添加弹出框 -->
    <ModalView ref="modalRef" />
  </div>
</template>

<script setup lang="ts">
import FormView from "./components/FormView.vue";
import TableView from "./components/TableView.vue";
import PageView from "./components/PageView.vue";
import ModalView from "./components/ModalView.vue";
import axios from "axios";

import { ref, onMounted } from "vue";

const tableData = ref([]);
const modalRef = ref<InstanceType<typeof ModalView> | null>(null);

//请求接口的数据
onMounted(() => {
  axios({
    url: "http://localhost:9090/lx/list",
    method: "get",
  }).then((res) => {
    tableData.value = res.data.data;
  });
});

const handleClick = () => {
  modalRef.value?.updateVisible(true);
};

const formView = (val: any) => {
  console.log("formView", val);
};

const pageValue = (val: number) => {
  console.log("pageValue", val);
};
const currentvalue = (val: number) => {
  console.log("currentvalue", val);
};
</script>

<style scoped></style>
